<%-- 
    Document   : BrowseSongByTitle
    Created on : Jun 7, 2012, 8:13:19 AM
    Author     : Student
--%>


<%@tag description="put the tag description here" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/style/style.css" />

<script  src="${pageContext.request.contextPath}/js/qaEffect.js"></script>
<script src="${pageContext.request.contextPath}/js/flexiblelist.js"></script>


<%-- The list of normal or fragment attributes can be specified here: --%>
<%@attribute name="message"%>
<jsp:useBean id="dao" scope="page" class="connection.DaoGenre"/>
<jsp:useBean id="dao2" scope="page" class="connection.DaoSong"/>

<%-- any content can be specified here e.g.: --%>

<script type="text/javascript">
    function searchit(){
        var keyword = document.getElementById('searchbar').value;
        for(var i=0;i<document.getElementById('searching').length;i++){
            if(document.getElementsByName("titleS")[i].className == 'titleS'){
                if(document.getElementsByName("titleS")[i].innerHTML.toLowerCase().indexOf(keyword.toLowerCase()) == -1){
                    document.getElementsByName("titleS")[i].style.height = '0px';
                }
                else{
                    document.getElementsByName("titleS")[i].style.height = '20px';
                }
            } 
        }
    }
</script>

<div id="itunewindow">


    <div id ="songlist" > 
        <input class="search" />
        <span class="sort" data-sort="question_slide" > Search Genre </span>
        <ol class="list">

            <c:forEach items="${dao.retrieveGetGenre()}" var="genre">
                <li class ="songdetail" >      


                    <div class="question_slide" > 
                        <span class="tracktitle">
                            ${genre.genre}
                        </span>
                    </div> 

                    <c:url value="/BuySongController" var="urlBuy">
                        <c:param name="songId" value="${song.songId}"/>
                    </c:url>

                    <table style="width: 100%; ">

                        <tr>
                            <td style="width: 5%"></td>
                            <td style="width: 10%">

                            </td>
                            <td style="width: 70%">


                            </td>
                        </tr>
                    </table>

                    <div class="answer"> 
                        <div id="searching"> 


                            <jsp:setProperty name="dao2" property="genreId" value="${genre.genreId}"/>
                            <c:forEach items="${dao2.retrieveGetSongByGenre()}" var="song">
                                ${song.title} <br/>

                            </c:forEach>
                            <br/>
                        </div> 

                    </div> 
                </li>
            </c:forEach>
        </ol>
    </div>
</div>

<script type="text/javascript"> 
    initShowHideDivs();
    // showHideContent(true,-1);	// Automatically expand first item
   
    var slideSpeed =10;	// Higher value = faster
    var timer = 10;	// Lower value = faster
    var expandMultiple = true;
        
    var options = {
        valueNames: [ 'tracktitle' ]
    };

    var featureList = new List('songlist', options);
        
        
        
        
    window.onload = function() { 
        var s = document.getElementById("mySelect");
        s.selectedIndex = s.options.length - 1;

    };
          
        
</script>   
